<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script  src="node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app">
  <h1>vue-resoure插件</h1>
  <a href="javascript:;" @click="get">get请求</a>
  <span>{{msg}}</span>
  <a href="javascript:;" @click="post">post请求</a>
  <a href="javascript:;" @click="jsonp">jsonp请求</a>
</div>
<script>
  new Vue({
    el: '#app',
    data:{
      msg: ''
    },
    http:{
      root:"http://localhost:63342/immocmall"
    },
    mounted(){
      Vue.http.interceptors.push(function (request, next) {
        console.log('request init');
        next(response => {
          console.log('response init');
          return response;
        })
      })
    },
    methods:{
      get(){
        this.$http.get("package.json",{
          params:{
            userId: 123
          }
        }).then( res => {
          this.msg = res.data
        }, error => {
          this.msg = error;
        })
      },
      post(){
        this.$http.post('package.json', {
          userId:123
        },{
          headers:{
            access_token: "123"
      }
        }).then(res => {
          this.msg = res.data;
        }, error => {

        })
      },
      jsonp(){
        this.$http.jsonp("https://www.imooc.com/article/recommenduser").then(res => {
          this.msg = res.data
        })
      }
    }
  })
</script>
</body>
</html>
